<template>
  <transition name="dialog-fade">
    <div v-show="visible" class="dong-dialog_wrapper">
      <div class="dong-dialog" :style="{ width, marginTop: top }">
        <div class="dong-dialog_header">
          <slot name="title">
            <span class="dong-dialog_title">{{ title }}</span>
          </slot>
          <button class="dong-dialog_headerbtn" @click="clickHandle">
            <Dong-Icon icon="xmark" />
          </button>
        </div>
        <div class="dong-dialog_body">
          <slot />
        </div>
        <div class="dong-dialog_footer" v-if="$slots.footer">
          <slot name="footer" />
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup>
import propObj from './props.js'
defineProps(propObj)
defineOptions({
  name: 'DongDialog'
})
const emit = defineEmits(['close'])
function clickHandle() {
  emit('close')
}
</script>

<style lang="scss" scoped></style>
